<template>
  <div class="main">
    <arrow :topList="topList"></arrow>
    <div class="top_title">内容管理 > {{ isEdit }}我的选题 <span
        class="top_title_span">注意:在创作过程中所使用的内容及图片、视频、音频资源需提供完整授权方可使用，禁止未经授权的下载和分享</span> </div>
    <div class="content1">
      <div><span class="must">*</span> 内容编辑：</div>
      <div class="radio_inner">
        <el-radio-group @input="radioHandle()" v-model="sucai2" size="medium">
          <el-radio-button v-for="(item, index) in sucaiOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{
              item.label }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="pic_handle_box">
        <div class="pic_handle">
          <div class="pic_handle_title" v-if="selectPic.length > 0">素材归集：</div>
          <div class="pic_handle_list">
            <div v-for="r in selectPic" :key="r.materialId" @click="insertContent(r.sourceUrl)">
              {{ imgEndUrl(r.sourceUrl) }} <i style="padding-left: 20px;" class="el-icon-circle-close"
                @click.stop="delSource(r)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="rich_box">
        <editorsTwo :value="form.content" v-model="form.content" :height="600"></editorsTwo>
      </div>
      <div class="img_box1">
        <div class="img_content">
          <div class="img_title"><span class="img_title_orange">*</span> 内容封面：</div>
          <div>
            <el-upload  :file-list="coverUrl" :before-upload="beforeUpload"
              :before-remove="() => { form.coverUrl = [] }" :on-success="uploadContent" :headers="headers"
              :data="{ folderType: 3 }" :action="coverImg" :multiple="false" list-type="picture">
              <div class="my_box" v-if="form.coverUrl.length < 1"><i class="el-icon-plus" style="font-size: 30px"></i></div>
            </el-upload>
          </div>
        </div>
        <div class="img_content" style="margin-top: 50px;">
          <div class="img_title"><span class="img_title_orange">*</span> 版权信息：</div>
          <div>
            <el-upload :file-list="copyrightUrl" list-type="picture" :before-remove="() => { form.copyrightUrl = [] }" 
              :action="uploadUrl" :headers="headers" :on-success="banquan" :data="{ folderType: 6 }" :multiple="false">
              <div class="my_box" v-if="form.copyrightUrl.length < 1"><i class="el-icon-plus" style="font-size: 30px"></i></div>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="keyword">
      <div class="keyword_title" style="margin-righisNoticebaot: 18px;"><span style="color:#F00000">*</span> 关键词：</div>
      <div class="keyword_input_width"><el-input v-model="form.keyWords" rows="5" placeholder="关键词，以逗号分割"
          type="textarea"></el-input></div>
    </div>
    <div class="btn_btm1">
      <el-button type="primary" style="margin-right: 45px;" @click="save">保存至初稿</el-button>
      <el-button plain style="margin-right: 45px;" @click="cancel">取消保存</el-button>
      <!-- <el-button type="info" plain @click="preView">预览</el-button> -->
    </div>
    <el-dialog title="素材引用" @close="sucai2 = 0" :visible.sync="sucaiRequire" width="1800px" center>
      <div class="pop">
        <el-radio-group @change="radioHandleInner()" v-model="formData.popsucai" size="medium">
          <el-radio-button v-for="(item, index) in popSucaiOption" :key="index" :label="item.value"
            :disabled="item.disabled">{{ item.label }}</el-radio-button>
        </el-radio-group>
        <div class="pop_title">
          <div style="padding-right: 10px;">关键词</div>
          <div style="width: 200px;padding-right: 10px;"><el-input v-model="pageList.keyword" placeholder="请输入检索词"
              clearable :style="{ width: '100%' }">
            </el-input></div>
          <el-button type="primary" size="mini" @click="getList">查询</el-button>
        </div>
      </div>
      <article class="list_box">
        <div class="list_box_flex" v-for="v, i in picList">
          <div class="list_box_flex_img" @click="pickImg(v)">
            <img :src="v.sourceUrl" width="200" height="144" v-if="pageList.type !== 3 && sucaiFlag">
            <div style="display: flex;justify-content: center;align-items: center;height: 100%;"
              v-if="pageList.type == 3 && sucaiFlag" class="list_box_flex_audio">
              <div style="font-size: 20px;">音频文件</div>
            </div>
            <div :class="{ 'selected_img': selectPic.some(r => r.materialId == v.materialId) }"></div>
            <div :class="{ 'selected_img_right': selectPic.some(r => r.materialId == v.materialId) }"></div>
          </div>
          <div class="list_box_flex_txt">{{ v.materialTitle }}</div>
        </div>
      </article>
      <div style="padding-right: 38px;">
        <pagination :page.sync="pageList.pageNum" :limit.sync="pageList.pageSize" @pagination="getList"
          v-show="totalImg > 0" :total="totalImg">
        </pagination>
      </div>

      <div style="display: flex;justify-content: center;align-items: center;text-align: justify;">
        <el-empty description="暂无数据" v-if="picList.length < 1"></el-empty>
      </div>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sucaiRequire = false">确定关联</el-button>
      </span>
    </el-dialog>
    <!-- <Mynotice :isNotice="isNotice" @updateProps="diaIs" @postData="postData"></Mynotice> -->
    <el-dialog :visible.sync="isNotice" center title="原创声明" style="line-height: 1.5;">
      <p>平台鼓励用户就自行创作并发布作品，作品本身应受著作权法保护且不得侵犯他人权益、符合平台运营规范。</p>
      <p>原创标识属于发布方对所发布内容中自行创作部分的著作权或著作权来源的单方面声明。</p>
      <p>如下情形不得声明原创，同时根据违规情况平台会对其做出相应处理。</p>
      <p></p>（1）整合引用内容：未经授权不合理引用或大篇幅整合网络信息、公共信息、报刊杂志、他人作品等的内容。
      <p>（2）公共公开内容：文章主要篇幅诸如为“法律、法规、决议、通知、历法、通用数表、时事新闻等政府机关、媒体、事业单位发布的文件，或其他社会性的公开数据、寻人启事、众筹救助、录取分数线”等内容；正文＜300字时不受原创保护。
      </p>
      <p>（3）营销宣传内容：主要目的为推广、宣传和销售的内容，比如广告宣传、商家活动、单位招聘、投票征稿等内容。</p>
      <p>（4）非独家授权内容：虽经原作者授权发布，但并未获得独家授权发布的内容。</p>
      <p>（5）未获得原著权利人独家授权的再创造内容：翻译、注释、演讲采访整理、音频转文字等。</p>
      <p>（6）无意义内容：无实际意义、无指导性、文字过于宽泛、含糊简单的内容，比如胡诌文字、大段文字堆砌、乱凑字数等。</p>
      <p>（7）恶意隐藏文字的内容：以特殊代码、排版、页面设置等技术手段恶意规避原创声明系统检测的内容，比如在源代码里隐藏文字、文字刷白等。</p>
      <p>（8）蹭原创内容：文字含糊简单、无实际意义、无指导性，且文章主要篇幅为搬运、导流等内容。</p>
      <p>（9）违法违规内容：色情、低俗、暴力、血腥、谣言、不实信息等内容。</p>
      <p>（10）其他：其他违反法律法规、政策及公序良俗、社会公德、平台正常运营和侵犯其他用户或第三方合法权益内容的信息。</p>
      <div style="padding-top: 50px;display: flex;flex-direction: column; align-items: flex-end;padding-right: 50px;">
        <div>作者签名：<span style="text-decoration: underline;">{{ $store.state.user.nickName }}</span></div>
        <div style="padding-top: 10px;">{{ MyformatDate() }}</div>
      </div>
      <div style="text-align:center;padding-top: 30px;">
        <el-button block type="primary" style="width: 120px;" size="large" @click="handleData">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="isPre">
      <!-- <br><p><img src="" width="750" height="100%" ></p>  -->
    </el-dialog>
    <MyDia :isOnOpen="open" @updateProp="updateValue" @getEdit="getEdit"></MyDia>
  </div>
</template>

<script>
import arrow from '@/views/components/arrow'
import editorsTwo from '@/views/components/MEditor/two'
import Mynotice from './shengming'
import MyDia from '@/views/content/addpic'
import { addTopic, editTopic, editMyArtcile } from '@/api/my/xuanti'
import { listMaterial } from "@/api/my"
import { getToken } from "@/utils/auth";
export default {
  components: { arrow, editorsTwo, Mynotice, MyDia },
  data() {
    return {
      sucaiFlag: false,   //素材引用加载防样式错误
      isPre: false,    //预览开关
      totalImg: 0,        //图片总页数
      copyrightUrl: [],  //预览版权图片
      coverUrl: [],      //预览封面图片
      selectPic: [],  //选择图片队列，
      pageList: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
        keyword: ''
      },
      coverImg: process.env.VUE_APP_BASE_API + "/common/commonFileUpload",
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/resourceFileUpload", // 上传的图片服务器地址
      // isSelectedRight:false,
      isEdit: '',  //路由判定，是新增还是修改
      open: false,  //新增素材弹窗
      isNotice: false,
      topList: {
        title: '流程指引',
        list: [
          { name: '素材管理', img: 'blue' },
          { name: '内容创作', img: 'blue' },
          { name: '专家审核', img: 'gray' },
          { name: '产品分发', img: 'gray' },
          { name: '传播管理', img: 'gray' },
        ]
      },
      headers: {
        Authorization: "Bearer " + getToken()
      },
      initForm: {
        content: '',
      },
      picList: [],  //图片列表
      formData: {
        title: '', //内容名称
        target: '', //
        digest: '',
        outline: '',
        results: '',
        type: '',
        timeRange: null,
        startTime: '',  //开始时间
        endTime: '',  //结束时间
        sucai: 0,
        popsucai: 0  //选中的素材值，1图片 3音频
      },

      sucaiOptions: [{
        "label": "素材引用",
        "value": 1
      }
        //,{
        //   "label": "新增素材",
        //   "value": 2
        // }, {
        //   "label": "委托素材",
        //   "value": 3
        // }
      ],
      popSucaiOption: [
        // {  //弹层单选
        //   "label": "已关联",
        //   "value": 1
        // },
        {
          "label": "图片",
          "value": 1
        }, {
          "label": "音频",
          "value": 3
        }],
      keyWord: '',
      sucai2: 0,
      popsucai: 0,
      sucaiRequire: false,  //不同弹层
      addSucai: false,  //不同弹层
      currentPage4: 1,  //弹窗素材分页
      form: {
        content: '',  //富文本
        copyrightUrl: "",
        coverUrl: "",
        keyWords: "",
        topicId: "",
        articleId: null,
      }
    }
  },
  created() {
    let is_edit = this.$route.query.type
    if (is_edit == 1) {
      this.isEdit = '新增'
    } else {
      this.isEdit = '编辑'
      this.editDataList()
    }
    this.pageList.pageNum = 1   //重置为1
    this.getList()  //默认图片
    this.formData.popsucai = 1  //默认选中图片
  },
  computed: {
    imgEndUrl(url) {
      // return 123
      return (url) => {
        //  console.log(url,123);
        // const url = "https://ossapi.169000.net/zyykp/sourceMaterialImg/2024/01/22/hushi_20240122152939A001.jpeg";
        const filenameRegex = /.*\/([^/]*?)$/;
        const match = url.match(filenameRegex);
        if (match) {
          return match[1]
          console.log(match[1]);  // 输出: hushi_20240122152939A001.jpeg  
        } else {
          console.log("没有找到文件名");
          return url
        }
      }
    }
  },
  methods: {
    delSource(source) {
      let arrNum = this.selectPic.indexOf(source)
      this.selectPic.splice(arrNum, 1)
    },
    async editDataList() {
      let head = process.env.VUE_APP_ImgUrlHeader
      let res = await editTopic(this.$route.query.topicId)  //修改回显
      // console.log();
      if (Object.keys(res.data).length === 0) { //空对象
        this.form.topicId = this.$route.query.topicId
      } else {
        this.copyrightUrl = []
        this.coverUrl = []
        this.form.content = res.data.content
        this.form.keyWords = res.data.keyWords
        this.form.coverUrl = res.data.coverUrl
        this.form.topicId = this.$route.query.topicId
        this.form.copyrightUrl = res.data.copyrightUrl
        this.copyrightUrl.push({ name: this.imgEndUrl(res.data.copyrightUrl), url: head + res.data.copyrightUrl })  //预览版权图片
        this.coverUrl.push({ name: this.imgEndUrl(res.data.coverUrl), url: head + res.data.coverUrl }) //预览封面图片
        if (res.data.articleId !== null) {
          this.form.articleId = res.data.articleId
        }
      }
      //  console.log(res,'llll');
    },
    banquan(response, file, fileList) {  //版权信息
      console.log(response, file, fileList);
      this.copyrightUrl = []
      if (response.code == 200) {
        this.form.copyrightUrl = response.data.filePath
        this.copyrightUrl.push({ 'url': response.data.url + response.data.filePath, 'name': this.imgEndUrl(response.data.filePath) })
        // this.copyrightUrl.push(response.data.url + response.data.filePath)
        this.$message.success({
          title: '提示',
          message: '上传版权信息成功'
        });
      } else {
        this.copyrightUrl = []
        this.$message.info('上传图片失败，请稍后重试')
      }

      //  console.log(response, 456);
    },
    beforeUpload(file) {    //验证，只能上传图片
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
      if (!isImage) {
        this.$message.error('只能上传图片文件！');
        return false;
      }
      return true;
    },
    uploadContent(response, file, fileList) {  //内容封面
      this.coverUrl = []
      if (response.code == 200) {
        this.form.coverUrl = response.data.filePath
        //  [ { url:   '/service/soilTesting'}, {url： '/service/soilTesting   }]
        this.coverUrl.push({ url: response.data.url + response.data.filePath, 'name': this.imgEndUrl(response.data.filePath) })
        this.$message.success({
          title: '提示',
          message: '上传内容封面成功'
        });
      } else {
        this.copyrightUrl = []
        this.$message.info('上传图片失败，请稍后重试')
      }

      //  console.log(response, 123);
    },
    insertContent(url) {
      const VideoPattern = /(mp3)|(mp4)/i
      const PicPattern = /(jpeg)|(png)|(jpg)/i
      const isVideo = VideoPattern.test(url)
      const isPic = PicPattern.test(url)
      const handle = this.form.content   //富文本的内容
      if (isPic) {
        const StringAppend = ` <br><p><img src="${url}" style="width:80%" ></p>`
        this.form.content = handle + StringAppend
        this.$notify.success({
          title: '提示',
          message: '添加图片成功'
        });
      }
      if (isVideo) {
        const StringAppend = ` <br><p><video src="${url}" style="width:80%" ></video></p>`
        this.form.content = handle + StringAppend
        this.$notify.success({
          title: '提示',
          message: '添加音视频成功'
        });
      }
      //console.log(isVideo,isPic);
      //if

    },
    insertImg(str) {  //复制
      let aux = document.createElement("input");
      aux.setAttribute("value", str);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      this.$notify.success({
        title: '提示',
        message: '复制成功'
      });
    },
    pickImg(value) {
      let res = this.selectPic.find(v => value.materialId == v.materialId)
      if (res == undefined) {
        this.selectPic.push(value)
        this.$notify.success({
          title: '提示',
          message: '选择素材成功'
        });
      } else {
        this.selectPic = this.selectPic.filter(r => r.materialId !== value.materialId)
        // this.$notify.error({
        //         title: '提示',
        //         message: '当前文件已经选择过了'
        //     });
      }
      //console.log(res);
    },
    async getList() {
      this.sucaiFlag = false
      let res = await listMaterial(this.pageList)
      this.totalImg = res.total
      this.picList = res.rows.map(v => {
        v.sourceUrl = process.env.VUE_APP_ImgUrlHeader + v.sourceUrl
        return v
      })
      this.sucaiFlag = true
      //console.log(this.picList,111);
    },
    handleData() {  //点击确认
      let is_edit = this.$route.query.type
      if (is_edit == 1) {
        // '新增'
        this.postData()
      } else {
        //'编辑'
        this.putData()
      }
    },
    Myvalidate() {
      //  console.log(123);
      if (this.form.coverUrl.length < 1) {
        this.$notify.info({
          title: '消息',
          message: '请上传内容封面'
        })
        return false
      }
      if (this.form.content.trim() == '<p><br></p>') {
        this.$notify.info({
          title: '消息',
          message: '请编辑内容'
        })
        return false
      }
      if (this.form.copyrightUrl.length < 1) {
        this.$notify.info({
          title: '消息',
          message: '请上传版权信息内容'
        })
        return false
      }
      if (this.form.keyWords.length < 1) {
        this.$notify.info({
          title: '消息',
          message: '请填写关键词'
        })
        return false
      }

      return true
    },
    async putData() {
      if (!this.Myvalidate()) return   //验证
      let res = await editMyArtcile(this.form)
      if (res.code == 200) {
        this.isNotice = false
        await this.editDataList()
        this.$router.push({ path: '/content/xuanti' })
      } else {
        this.$message.info('专题创作编辑失败，请稍后重试')
      }
      //console.log(res, 123);
    },
    richImg(newContent) {
      // let find = html.replace(/<img[^>]*>/gi, function (match, capture) {
      //   match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
      //   match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
      //   match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
      //   return match;
      // })
      //   newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
      //     match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
      //     return match;
      //   });
      // newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/\<img/gi, '<img style="width:100%"');
      return newContent;
    },
    async postData() {
      if (!this.Myvalidate()) return   //验证
      this.isNotice = false
      this.form.topicId = this.$route.query.id
      let res = await addTopic(this.form)
      if (res.code == 200) {
        //  this.$message.success('专题创作成功')
        this.$notify.success({
          title: '成功',
          message: '选题内容创作完成'
        })
        // console.log(1111);
        this.$router.push({ path: '/content/xuanti' })
      } else {
        this.$message.info('专题创作失败，请稍后重试')
      }
      //console.log(res);
    },
    save() {
      //this.html = this.richImg(this.html)
      this.form.content = this.richImg(this.form.content)
      // console.log(this.form.content);
      //return
      if (!this.Myvalidate()) return   //验证
      this.isNotice = true
      //  console.log('保存');
    },
    cancel() {
      this.$router.push({ path: '/content/xuanti' })
      //console.log('取消保存');
    },
    preView() {
      // this.
      //this.$router.push({ path: '/content/preview' })
      this.isPre = true

      // console.log('预览');
    },
    handleSizeChange(val) {

      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
    },
    radioHandleInner() {
      this.pageList.type = this.formData.popsucai  //切换视频和图片列表
      this.getList()
      // console.log();
    },
    radioHandle() {
      let change = this.sucai2  //1素材引用  2新增素材 3委托素材
      if (change == 1) { //1素材引用
        this.sucaiRequire = true
        this.addSucai = false
        this.open = false
      }
      if (change == 2) { //2新增素材
        this.sucaiRequire = false
        this.addSucai = true
        this.open = true
      }
      if (change == 3) { //3委托素材
        this.open = false
        this.sucaiRequire = false
        this.addSucai = false

        this.$message.info('委托素材暂未开通')
      }
      // console.log(a);
    },
    updateValue(val) {
      this.open = val
      this.sucai2 = 0  //非选中
    },
    diaIs(val) {  //
      this.isNotice = val
      this.sucai2 = 0  //非选中
    },
    getEdit() {  //新增成功后，刷新列表用，这里不需要刷新

    },
    input(value) {
      this.initForm.content = value
    },
    MyformatDate() {  //cellValue
      // if (cellValue == null || cellValue == "") return "";
      var date = new Date()  //cellValue
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '年' + month + '月' + day + '日'
    }

  },

}
</script>

<style lang='scss' scoped>
.main {
  .top_title {
    padding-top: 20px;
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    color: #3D3D3D;
    line-height: 21px;
    padding-left: 32px;

    .top_title_span {
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #FE5B49;
      line-height: 16px;
    }
  }

  .pop {
    display: flex;
    justify-content: space-between;
    padding-left: 70px;
    padding-right: 100px;

    .pop_title {
      display: flex;
      align-items: center;
    }
  }

  .list_box {
    margin-top: 20px;
    display: flex;
    // width: 1500px;
    flex-wrap: wrap;

    .list_box_flex {
      display: flex;
      align-items: center;
      flex-direction: column;
      flex-wrap: wrap;
      // margin-right: 30px;
      width: calc((100% - 30px) / 5);

      &:nth-child(5n) {
        margin-right: 0;
      }

      .list_box_flex_img {
        cursor: pointer;
        width: 200px;
        height: 144px;
        position: relative;
        z-index: 2;

        // box-sizing: border-box;
        //   border: 2px solid #588BFF;
        // background-color: aquamarine;
        .selected_img {
          position: absolute;
          z-index: 5;
          right: 0;
          top: 0;
          width: 30px;
          height: 26px;
          background-image: url('./img/img_right_selected.png');
          background-repeat: no-repeat;

        }

        .selected_img_right {
          position: absolute;
          z-index: 6;
          right: 2px;
          top: 2px;
          width: 14px;
          height: 10px;
          background-image: url('./img/right.png');
          background-repeat: no-repeat;
        }
      }

      .list_box_flex_txt {
        width: 200px;
        margin-top: 10px;
        margin-bottom: 30px;
      }
    }
  }

  .content1 {
    padding-top: 43px;
    padding-left: 70px;

    .must {
      color: #FF0000;
    }

    .radio_inner {
      padding-top: 12px;
    }

    .pic_handle_box {

      .pic_handle {
        .pic_handle_title {
          padding-top: 10px;
          //color: red;
        }

        .pic_handle_list {
          cursor: pointer;
          padding-left: 10px;
          padding-top: 5px;
          padding-top: 10px;
          font-size: 17px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #409EFF;
          line-height: 22px;
          display: flex;
          flex-direction: column;
        }
      }
    }

    .rich_box {
      padding-top: 12px;
      width: 980px;
    }

    .img_box1 {
      display: flex;
      flex-direction: column;
      padding-top: 30px;

      .img_content {
        display: flex;
        align-items: center;
        margin-right: 210px;

        .img_title {
          .img_title_orange {
            color: #FF0000;
          }
        }
      }
    }
  }

  .keyword {
    padding-bottom: 30px;
    padding-top: 43px;
    padding-left: 73px;
    display: flex;
    align-items: center;

    .keyword_input_width {
      width: 890px;
    }

    .keyword_title {}
  }

  .btn_btm1 {
    padding-left: 197px;
    padding-bottom: 100px;
  }

  // .pop {
  //   display: flex;
  //   justify-content: space-between;
  //   padding-left: 20px;
  //   padding-right: 45px;
  //   .pop_title {
  //     display: flex;
  //     align-items: center;
  //     padding-bottom: 10px;
  //   }
  // }

  // .list_box {
  //   margin-top: 20px;
  //   display: flex;
  //   // width: 1500px;
  //   flex-wrap: wrap;
  //  // justify-content: space-around;

  //   .list_box_flex {
  //    flex-shrink: 0;
  //    display: flex;
  //     align-items: center;
  //     flex-direction: column;
  //     flex-wrap: wrap;
  //   //  margin-right: 84px;
  //   //  width: calc((100% - 30px) / 5);

  //     &:nth-child(4n) {
  //       margin-right: 0;
  //     }

  //     .list_box_flex_img {
  //       width: 200px;
  //       height: 144px;
  //       // border: 1px solid #ccc;
  //       // background-color: rgb(172, 243, 219);
  //     }

  //     .list_box_flex_audio {
  //       width: 200px;
  //       height: 144px;
  //       border: 1px solid #ccc;
  //       // background-color: rgb(172, 243, 219);
  //     }

  //     .list_box_flex_txt {
  //       width: 200px;
  //       margin-top: 10px;
  //       margin-bottom: 30px;
  //     }
  //   }
  // }
}

::v-deep .el-upload-list__item {
  width: 360px;
  //display: flex;
  // height: 100px;
}

.my_box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  width: 350px;
  border: 1px dashed #ccc;
  border-radius: 8px;
}
</style>